<script setup lang="ts">
import Firewall, { FirewallSummary } from '@firewall/engine/Firewall';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  firewall?: Partial<FirewallSummary>,
}
const props = withDefaults(defineProps<Props>(), {
  firewall: () => ({}),
});
type Emit = {
  (e: 'update:firewall', item?: FirewallSummary): void,
}
const emit = defineEmits<Emit>();
const firewalls = ref((await Firewall.fetchSummaryList({})).list || []);
const onSelectorChange = (value: string) => {
  emit('update:firewall', firewalls.value.find((firewall) => firewall.firewallId === value));
};
const onSelectorResolve = () => {
  emit('update:firewall', firewalls.value[0]);
};
</script>

<template>
  <div class="firewall-selector">
    <Suspense :onResolve="onSelectorResolve">
      <div class="selectors">
        <ElSelect
          :model-value="props.firewall.firewallId"
          class="selector"
          filterable
          :placeholder="t('selectFirewallPlease')"
          @change="onSelectorChange"
        >
          <ElOption
            v-for="item in firewalls"
            :key="item.firewallId"
            :value="item.firewallId"
            :label="`${item.vpcId}(${item.vpcIp})`"
          />
        </ElSelect>
        <ElSelect
          :model-value="props.firewall.firewallId"
          class="selector"
          filterable
          :placeholder="t('selectFirewallPlease')"
          @change="onSelectorChange"
        >
          <ElOption
            v-for="item in firewalls"
            :key="item.firewallId"
            :value="item.firewallId"
            :label="item.firewallName"
          />
        </ElSelect>
      </div>
      <template #fallback>
        <div v-loading="true" class="firewall-selector-placeholder" />
      </template>
    </Suspense>
  </div>
</template>

<i18n lang="yaml" locale="zh-CN">
  selectFirewallPlease: '您需要选择配置的防火墙实例'
</i18n>

<style lang="scss" scoped>
.selectors {
  display: flex;
  flex-direction: row;
  align-items: center;

  .selector {
    width: 320px;
    margin-right: 10px;
  }
}

.firewall-selector-placeholder {
  :deep(.el-loading-mask) {
    background-color: transparent;
    transform: scale(0.5);
  }
}
</style>
